import React, { useState,useEffect } from 'react';
import {
  HighlightOutlined,
  HomeOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'

const Bar: React.FC = () => {
  const navigate = useNavigate()

  let [index,setIndex] = useState(0);

  let [str,setStr] = useState('animate-bounce')

  let a:any=''

  let pathList = ['/','/practice','/my']

  const setActive = (i:number) => { 
    if(i===index) return 
    setStr('animate-bounce')   
    clearTimeout(a)
    setIndex(i) 
    navigate(pathList[i])
  };

  useEffect(() => {
    a = setTimeout(() => setStr(''), 1500)
  }, [index])

  return (
    <div className="fixed bottom-0 w-full bg-white">
      <div className="flex w-full justify-evenly">
        <div className="h-[50px] w-[50px] text-center" onClick={()=>setActive(0)}>
          <div className={index === 0 ? 'bg-bar' : ''}>
            <div className={`${index === 0 ? 'bg-bar-active' : ''} ${index===0 ? str :''}`}>
              <HomeOutlined />
            </div>
          </div>
          <div className={index === 0 ? 'mt-[22px] relative' : ''} >首页</div>
        </div>
        <div className="h-[50px] w-[50px] text-center" onClick={()=>setActive(1)}>
          <div className={index === 1 ? 'bg-bar' : ''}>
            <div className={`${index === 1 ? 'bg-bar-active' : ''} ${index===1 ? str :''}`}>
              <HighlightOutlined />
            </div>
          </div>
          <div className={index === 1 ? 'mt-[22px] relative' : ''}>练习</div>
        </div>
        <div className="h-[50px] w-[50px] text-center" onClick={()=>setActive(2)}>
          <div className={index === 2 ? 'bg-bar' : ''}>
            <div className={`${index === 2 ? 'bg-bar-active' : ''} ${index===2 ? str :''}`}>
              <UserOutlined />
            </div>
          </div>
          <div className={index === 2 ? 'mt-[22px] relative' : ''}>我的</div>
        </div>
      </div>
    </div>
  );
};

export default Bar;
